<template>
  
    <div class="textarea-container">
        <div class="line-numbers">
          <div v-for="i in lineCount" :key="i" class="line"></div>
        </div>
        <textarea ref="editor" class="editor"  @scroll="txtscroll" @input="$emit('input',$event.target.value)"  placeholder="请输入" :value="value"></textarea>
    </div>
</template>

<script>
export default {
  name: 'CodeEdit',
  data() {
    return {
    }
  },
  props: {
    value:{
      type: String,
      default: ''
    } 
  },
  computed:{
    lineCount(){
      return this.value.split('\n').length
    }
  },
  watch: {
    
  },
  mounted() {
    
  },
  methods: {
    txtchange(event){
        this.$emit('input',event.target.value)
    },
    txtscroll(event){
      let editor = event.target
      let linenums = editor.previousElementSibling
      linenums.scrollTop = editor.scrollTop;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .textarea-container {
      flex:1;
      display: flex;
      border: 1px solid #ccc;
      flex-direction:row;
     
  }

  .textarea-container .editor{
      justify-content:flex-end;
  }

  .textarea-container .editor, .textarea-container .line-numbers {
      font-family: monospace;
      font-size: 14px;
      line-height: 1.5;
      vertical-align: text-bottom;
  }


  .line-numbers {
      width: 35px;
      background: #f0f0f0;
      border-right: 1px solid #ccc;
      padding: 20px 5px;
      box-sizing: border-box;
      counter-reset: line;
      overflow:hidden ;
      display: flex;
      flex-direction: column;
  }


  .line-numbers .line::before {
      color:gray;
      text-align: right;
      box-sizing: border-box;
      content:counter(line);
      counter-increment: line;
      flex:1;
      margin: 0;
  }
  

  .editor {
      flex:1;
      border: none;
      outline: none;
      resize: none;
      white-space: pre-wrap;
      overflow-y: scroll;
      box-sizing: border-box;
      background: black;
      padding: 20px;
      color:white;
  }

</style>
